<template>
  <div class="mainPage">
    <!-- 游客统计 地区分布 -->
    <div class="pic5">
      <div class="title5">
        <p>预约统计</p>
      </div>
      <div class="title5">

        <el-date-picker v-model="timedq" @change="timeChangedq" type="daterange" unlink-panels value-format='yyyy-MM-dd'
          :clearable='false' range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <span
          style="font-size: 16px; margin-left: 30px;">统计时间:&nbsp;&nbsp;{{this.timedq[0]}}&nbsp;&nbsp;至&nbsp;&nbsp;{{this.timedq[1]}}</span>
      </div>
      <div class="feath">
        <div class="pictj">
          <div style="background-color:#fff;box-shadow: 0px 4px 4px #ccc ;">
            <p>预约数量 <Tooltip max-width="200" content="在所选时间内，按照预约入馆日期对预约人数进行统计，不包含取消订单，不包含取消订单预约，包含预约未核销的订单"
                placement="bottom">
                <Icon style="margin-left: 10px; margin-top: 7px" size="20" type="ios-help-circle-outline" />
              </Tooltip>
            </p>
            <p style="margin-top: 20px; font-size: 22px;">{{yynumber}} <span style="font-size: 16px;">人</span> </p>
          </div>
          <div style="background-color:#fff;box-shadow: 0px 4px 4px #ccc ;">
            <p>核销数量<Tooltip max-width="200" content="在所选时间内，按照核销日期对核销数量进行统计" placement="bottom">
                <Icon style="margin-left: 10px; margin-top: 7px" size="20" type="ios-help-circle-outline" />
              </Tooltip>
            </p>
            <p style="margin-top: 20px; font-size: 22px;">{{hxnumber}} <span style="font-size: 16px;">人</span> </p>
          </div>
          <div style="background-color:#fff;box-shadow: 0px 4px 4px #ccc ;">
            <p>核销率<Tooltip max-width="200" content="在所选时间内，预约数量与核销数量的比值进行统计" placement="bottom">
                <Icon style="margin-left: 10px; margin-top: 7px" size="20" type="ios-help-circle-outline" />
              </Tooltip>
            </p>
            <p style="margin-top: 20px; font-size: 22px;">{{hexnumber1*100}} <span style="font-size: 16px;">%</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 预约核销趋势图 -->
    <div class="pic6">
      <div class="title6">
        <p>预约/核销趋势图</p>
      </div>
      <div class="title6">
        <el-date-picker v-model="timesex" @change="timeChangesex" :picker-options="pickerOptions" type="daterange"
          value-format='yyyy-MM-dd' :clearable='false' unlink-panels range-separator="-" start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <span
          style="font-size: 16px; margin-left: 30px;">统计时间:&nbsp;&nbsp;{{this.timesex[0]}}&nbsp;&nbsp;至&nbsp;&nbsp;{{this.timesex[1]}}</span>
        <Button type="info" @click="exportVisitorsTrendDayExcel" style="margin-left: 20px;">导出表格</Button>

      </div>
      <div class="tendencyFa ">
        <input class="tendency" @click="tendency(1)" type="radio" checked="checked" name="1" value="tendency1">按天趋势图
        <Tooltip max-width="200" content="在所选时间内，按照每天趋势对预约入馆日期及核销数量曲线图可视化展示，最多可筛选30天时间范围内的数据" placement="bottom">
          <Icon style="margin-left: 4px" size="18" type="ios-help-circle-outline" />
        </Tooltip>
        <input class="tendency" @click="tendency(2)" type="radio" name="1" value="tendency2">按周趋势图<Tooltip
          max-width="200" content="在所选时间内，按照一周对预约入馆日期及核销数量曲线图可视化展示，一个月为周的计算节点，最多可筛选55周范围内的数据" placement="bottom">
          <Icon style="margin-left: 4px" size="18" type="ios-help-circle-outline" />
        </Tooltip>
        <input class="tendency" @click="tendency(3)" type="radio" name="1" value="tendency3">按月趋势图<Tooltip
          max-width="200" content="在所选时间内，按照每月对预约入馆日期及核销数量曲线图可视化展示，最多可筛选18个月范围内的数据（31天*18个月）" placement="bottom">
          <Icon style="margin-left: 4px" size="18" type="ios-help-circle-outline" />
        </Tooltip>
        <input class="tendency" @click="tendency(4)" type="radio" name="1" value="tendency4">按年趋势图<Tooltip
          max-width="200" content="在所选时间内，按照每年对预约入馆日期及核销数量曲线图可视化展示，最多可筛选10年范围内的数据（366天*10）" placement="bottom">
          <Icon style="margin-left: 4px" size="18" type="ios-help-circle-outline" />
        </Tooltip>
      </div>
      <div id="mainsex"></div>
    </div>
    <!-- 到馆情况分析 -->
    <div class="card1">
      <div class="title5">
        <span style="font-size: 16px;">预约时间:</span>
       

        <!-- <el-date-picker style="margin-left: 30px;" v-model="timesyy" @change="time1Changeyy" type="daterange" value-format='yyyy-MM-dd'
          :clearable='false' range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker> -->
        <el-date-picker style="margin-left: 20px;" value-format='yyyy-MM-dd' v-model="valueday" @change="dayChange"
          type="date" placeholder="请选择开始日期">
        </el-date-picker>
        <!-- <span style="font-size: 16px; margin-left: 30px;">预约时间:&nbsp;&nbsp;{{this.timesyy[0]}}&nbsp;&nbsp;至&nbsp;&nbsp;{{this.timesyy[1]}}</span> -->
        <el-select style="margin-left: 30px;" v-model="valuem" @change="valuechange" placeholder="请选择场次">
          <el-option v-for="item in options" :key="item" :value="item">
          </el-option>
        </el-select>
        <Button type="info" @click="exportTotalResult" style="margin-left: 20px;">导出表格</Button>
      </div>
      <div style="display: flex;">
        <div style="width:50%;text-align: center;">
          <div style="margin-top:32px">预约人数<Tooltip max-width="200"
              content="在所选时间和场次内，按照预约入馆时间对预约人数进行统计，不包含取消订单和预约已过期订单" placement="bottom">
              <Icon style="margin-left: 4px" size="18" type="ios-help-circle-outline" />
            </Tooltip>
          </div>
          <div style="margin-top:25px;font-size: 20px;">{{bookNum}}</div>
        </div>
        <div style="width:50%;text-align: center;">
          <div style="margin-top:32px">核销人数<Tooltip max-width="200" content="在所选时间和场次内，按照核销时间对核销人数进行统计"
              placement="bottom">
              <Icon style="margin-left: 4px" size="18" type="ios-help-circle-outline" />
            </Tooltip>
          </div>
          <div style="margin-top:25px;font-size: 20px;">{{usedNum}}</div>
        </div>
      </div>
    </div>
    <div
      style="display:flex;width:100%;justify-content: space-between;background-color: #fff;margin-top: 20px;height: 510px;">
      <div class="picyy">
        <div class="title">
          <p>到馆核销率</p>
        </div>
        <div style="margin-left:10px">预约人数:{{bookNum}}</div>
        <div style="margin-left:10px">核销人数:{{usedNum}}</div>
        <div id="mainyy1"></div>
      </div>
      <div class="pic2">
        <div class="title2">到馆人数占比图</div>
        <div id="main2"></div>
      </div>
    </div>
    <!-- <div class="picyy">     
      <div class="title">
        <p>到馆核销率</p>
      </div>
      <div class="ming">
        <div>预约人数:{{bookNum}}</div>
        <div>核销人数:{{usedNum}}</div>
      </div>
      <div id="mainyy1"></div>
    </div> -->
    <!-- 到馆人数占比图 -->
    <!-- <div class="pic2">
      <div class="title2">到馆人数占比图</div>
      <div id="main2"></div>
    </div> -->

  </div>
</template>
<script src="./statistics.js"></script>
<style scoped>
  /* 头部 */
  .heads {
    width: 100%;
    height: 40px;
    background-color: white;
    /* border-bottom: 2px solid rgb(148, 145, 145); */
    border-bottom: 2px solid #EBEBEB;
  }

  .feath {
    width: 100%;
    display: flex;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

  }

  .ming {
    width: 100%;
    height: 50px;
    /* background-color: red; */
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 18px;
  }

  .pictj {
    /* width: 100%; */
    height: 200px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;

  }

  .pictj>div {
    width: 180px;
    height: 90px;
    margin-left: 15px;
    padding-left: 20px;
    padding-top: 5px;
    color: rgb(36, 34, 34);
  }

  .qwer {
    width: 160px;
    height: 38px;
    /* background-color: red; */
    position: relative;
    top: -51px;
    left: 165px;
    /* text-align: center; */
    line-height: 39px;
    font-size: 28px;
  }

  .asdf {
    width: 160px;
    height: 38px;
    /* background-color: red; */
    position: relative;
    top: -87px;
    left: 429px;
    /* text-align: center; */
    line-height: 39px;
    font-size: 28px;
  }

  .pic5 {
    width: 100%;
    height: 300px;
    margin-top: 0px;
    background-color: #fff;
    border-radius: 5px;
  }

  .card1 {
    width: 100%;
    height: 200px;
    margin-top: 85px;
    background-color: #fff;
    border-radius: 5px;
  }

  .pic6 {
    width: 100%;
    height: 400px;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 5px;
  }

  #main {
    width: 100%;
    height: 400px;
    background-color: #fff;
    border-radius: 5px;
  }

  #mainyy1 {
    width: 100%;
    height: 350px;
    background-color: white;
    border-radius: 5px;
  }

  #mainage {
    width: 100%;
    height: 400px;
    background-color: #fff;
    border-radius: 5px;
  }

  #maindq {
    width: 100%;
    height: 400px;
    background-color: #fff;
    border-radius: 5px;
  }

  #mainsex {
    width: 100%;
    height: 300px;
    background-color: #fff;
    border-radius: 5px;
  }

  .pic1 {
    width: 49%;
    height: 400px;
    margin-top: 80px;
    background-color: #fff;
    border-radius: 5px;

  }

  .picyy {
    width: 49%;
    height: 400px;
    margin-top: 50px;
    background-color: #fff;
    border-radius: 5px;
  }

  .title {
    width: 100%;
    height: 62px;
    border-bottom: 2px solid #EBEBEB;
    font-size: 22px;
    line-height: 62px;
    padding-left: 18px;
    padding-right: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .mainPage {
    height: 100%;
    background-color: #EBEBEB;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* padding-top: 52px; */
    overflow: scroll;
    box-sizing: border-box;
  }

  #main2 {
    width: 100%;
    height: 400px;
    background-color: #fff;
    border-radius: 5px;
  }

  #main3 {
    width: 100%;
    height: 400px;
    background-color: #fff;
    border-radius: 5px;
  }

  /* #chinaMap {
    width: 100%;
    height: 400px;
    background-color: #fff;
    border-radius: 5px;
  } */

  /* #cityMap {
    width: 100%;
    height: 400px;
    background-color: #fff;
    border-radius: 5px;
  } */

  .pic2 {
    width: 49%;
    margin-top: 50px;
    background-color: #fff;
    border-radius: 5px;
    height: 400px;

  }

  .pic3 {
    width: 49%;
    margin-top: 80px;
    background-color: #fff;
    border-radius: 5px;
    height: 400px;

  }

  .pic4 {
    width: 49%;
    margin-top: 80px;
    background-color: #fff;
    border-radius: 5px;
    height: 400px;

  }

  .title2 {
    width: 100%;
    height: 62px;
    border-bottom: 2px solid #EBEBEB;
    font-size: 22px;
    line-height: 62px;
    padding-left: 18px;
  }

  .title3 {
    width: 100%;
    height: 62px;
    border-bottom: 2px solid #EBEBEB;
    font-size: 22px;
    line-height: 62px;
    padding-left: 18px;
    padding-right: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;

  }

  .title4 {
    width: 100%;
    height: 62px;
    border-bottom: 2px solid #EBEBEB;
    font-size: 22px;
    line-height: 62px;
    padding-left: 18px;
    padding-right: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .title5 {
    width: 100%;
    height: 62px;
    border-bottom: 2px solid #EBEBEB;
    font-size: 22px;
    line-height: 62px;
    padding-left: 18px;
    padding-right: 18px;
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .title6 {
    width: 100%;
    height: 62px;
    border-bottom: 2px solid #EBEBEB;
    font-size: 22px;
    line-height: 62px;
    padding-left: 18px;
    padding-right: 18px;
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .data {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: -90px;
  }

  .left {
    width: 49%;
    height: 150px;
    box-sizing: border-box;
    margin-bottom: 1px;
  }

  .btn {
    padding-right: 18px;
  }

  .right {
    width: 49%;
    height: 150px;
    box-sizing: border-box;
  }

  .title1 {
    width: 100%;
    display: flex;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    box-sizing: border-box;
    margin-bottom: 1px;
  }

  .content {
    width: 100%;
    background-color: #fff;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-size: 30px;
    font-weight: 600;
    color: #515A6E;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  .subTitle {
    font-size: 16px;
    padding-left: 18px;
  }

  .tendencyFa {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    user-select: none;
  }

  .tendencyFa .tendency {
    color: #9b8c8c;
    margin-left: 50px;
    ;
    cursor: pointer;

  }

</style>
